<template>
  <div class="toast">{{message}}</div>
</template>

<script>
import {reactive,toRefs} from 'vue'

export default {
  props:['message']
}
export const useToastEffect=()=>{
  const toastData=reactive({
    show:false,
    toastMessage:''
  });
  const showToast=(message)=>{
    toastData.show=true
    toastData.toastMessage=message
    setTimeout(()=>{
      toastData.show=false
      toastData.toastMessage=''
    },2000)
  }

  const {show,toastMessage}=toRefs(toastData)
  // 相当于令show=toastData.show,toastMessage=toastData.toastMessage

  return {show,toastMessage,showToast}
}
</script>

<style lang="scss" scoped>
@import '../style/virables.scss';
.toast{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  padding: .1rem;
  background: rgba(0,0,0,.35);
  border-radius: .05rem;
  color: $bgColor;
}
</style>